<!--选择通用部分-->
<button type="button" data-toggle="modal" data-target="#author-Modal" class="btn btn-primary" data-url="{:url('api/author/lists')}">选择创作者</button>
<input type="hidden" name="author_id" value="{$data['author_id']}" />
<div class="choose author-list">
	{if !empty($data['author_id']) && !empty($data['author'])}
	<div class="item clearfix" data-id="{$data['author_id']}">
		<div class="image">
			<img src="{$data['author']['cover_200']}">
		</div>
		<div class="del-btn">
			<button type="button" class="btn btn-danger">移除讲师</button>
		</div>
		<div class="content">
			<div class="title">{$data['author']['name']}</div>
			<div class="description">{$data['author']['description']}</div>
		</div>
	</div>
	{/if}
</div>

<!-- 选择模态框 start -->
<div class="modal fade" id="author-Modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h3 class="modal-title">选择创作者</h3>
			</div>
			<div class="modal-body">
				<div class="author-search">
					<div class="input-group">
						<div class="input-control search-box-circle has-icon-left has-icon-right search-example">
						  <input id="inputSearch" type="search" name="keyword" class="form-control search-input" placeholder="搜索">
						  <label for="inputSearch" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
						</div>
						<span class="input-group-btn">
						  <button class="btn btn-primary btn-search" type="button">搜索</button>
						</span>
					</div>
                </div>
				<div class="author-list">
					
				</div>
				<div class="author-page">
                    <ul id="author-page" data-ride="pager" class="pager" data-elements="prev,nav,next,page_of_total_text"></ul>
                </div>
			</div>
		</div>
	</div>
</div>
<!-- 选择讲师模态框 end -->
<script>
	$(function(){
		//初始化搜索关键字
		var keyword = '';
	    //监听对话框状态
	    $('#author-Modal').on('show.zui.modal', function() {
	        //初始加载第一页
	        getData(1,keyword);
	    });

		//搜索按钮点击事件
		$('.author-search .btn-search').click(function(){
			//console.log(keyword);
			keyword = $('.author-search input[name="keyword"]').val();
			getData(1,keyword);
		});

	    // 获取分页器实例对象
	    var teacherPager = $('#author-page').data('zui.pager');
	    //动态绑定分页器页码点击
	    $('#author-page').on('onPageChange', function(e, state, oldState) {
	        if (state.page !== oldState.page) {
	            getData(state.page,keyword);
	        }
	    });
	    
	    //点击列表项后的处理
	    $('#author-Modal').on('click','.item',function(){
	        //写入隐藏域内
	        $('input[name="author_id"]').val($(this).data('id'));
	        //写入表单内
	        $('.choose.author-list').html($(this).prop("outerHTML"));
	        //关闭模态框
	        $('[data-dismiss="modal"]').click();
	    });

	    //移除讲师DOM
	    $('.choose.author-list').on('click','.del-btn',function(){
	        $('.choose.author-list').html('');
	        $('input[name="author_id"]').val(0);
	    });

	    //异步加载数据
	    function getData(page,keyword){
			//console.log(keyword);
			keyword = '' || keyword;
	        var url = $('[data-target="#author-Modal"]').data('url');
	        var url = url + '?r=5'+'&page='+page+'&keyword='+keyword;
	        $.get(url,function(data){
	            //console.log(data.data);
	            if(data.code){
	                //初始化html
	                var html_text = '';
	                if(data.data.data.length>0){
	                    $.each(data.data.data,function(i,n){
	                        html_text += '<div class="item clearfix" data-id='+ n.id +'>';
	                        html_text += '<div class="image"><img src="'+ n.cover_100+'" /></div>';
	                        html_text += '<div class="del-btn">';
	                        html_text += '<button type="button" class="btn btn-danger">移除讲师</button>';
	                        html_text += '</div>';
	                        html_text += '<div class="content">';
	                        html_text += '<div class="title">'+ n.name +'</div>';
	                        html_text += '<div class="description text-ellipsis">'+ n.description +'</div>';
	                        html_text += '</div>';
	                        html_text += '</div>';
	                    });
	                }else{
	                    html_text = '<div class="no-data-box"><div class="no-data-img"></div><div class="no-data-tips">暂无讲师数据</div></div>';
	                }
	                

	                //写入DOM
	                $('#author-Modal .author-list').html(html_text);

	                // // 动态设置当前页码参数
	                // teacherPager.set(
	                //     parseInt(data.data.current_page), 
	                //     parseInt(data.data.total), 
	                //     parseInt(data.data.per_page));
	            }
	        });
	    }
	});
</script>